<template>
  <div class="search">
    <div class="home_search">
      <div class="home_leimu" @click="$router.go(-1)">
        <i class="iconfont icon-xiangzuo1"></i>
      </div>
      <van-search
        v-model="searchValue"
        placeholder="搜索商品名称"
        @input="onInput"
        @search="onSearch"
      />
    </div>
    <div class="content">
      <div class="history" style="margin-bottom: 0.6rem" v-show="history.length">
        <div class="title" style="" >
          <span>搜索历史</span>
          <i class="iconfont icon-shanchu" @click="delHistory"></i>
        </div>
        <div class="buttons_out">
          <div class="buttons_in">
            <span v-for="item,index of history" :key="index"  @click="searchValue=item;searchShow=true">{{item}}</span>
          </div>
        </div>
      </div>
      <div class="history" style="margin-bottom: 0.6rem">
        <div class="title" style="">
          <span>搜索发现</span>
        </div>
        <div class="buttons_out">
          <div class="buttons_in">
            <span v-for="(item, index) of find" :key="index" @click="searchValue=item;searchShow=true">{{ item }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="prompt" v-show="show">
      <div v-for="(item, index) of prompt" :key="index" @click="show=false;searchShow=true">
        <span>{{ item }}</span>
      </div>
    </div>
    <div class="page_wrap" v-if="searchShow">
      <ul>
        <li
          class="item"
          v-for="value of list"
          :key="value.product_id"
          @click="$router.push('/details')"
        >
          <div class="item_img">
            <img :src="value.puzzle_url" />
          </div>
          <div class="item_intro">
            <div class="item_name">
              <p>{{ value.name }}</p>
            </div>
            <div class="item_brief">
              <p>{{ value.product_desc }}</p>
            </div>
            <div class="item_price">
              <span class="price">￥{{ value.market_price }}</span>
            </div>
            <div class="item_comment">
              <span>{{ value.comments_total }}条评价</span
              ><span>{{ value.satisfy_per }}满意</span>
            </div>
          </div>
        </li>
      </ul>
      <div class="head_mark">
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3f00943bf04702405b8e8bc9f404a9f6.png"
          alt=""
        />
      </div>
      <div class="recommend_lists">
        <div
          class="recommend_list"
          v-for="(item, index) of recommend"
          :key="index"
          @click="$router.push('/details')"
        >
          <div class="list_img">
            <img :src="'https:' + item.image_url" />
          </div>
          <div class="list_info">
            <div class="list_name">{{ item.name }}</div>
            <div class="list_price price">
              ￥{{ item.price
              }}<del class="price" v-if="item.market_price !== item.price"
                >￥{{ item.market_price }}</del
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Search } from "vant";
import { recommend } from "../assets/js/shuju.js";
import { mapMutations, mapState } from 'vuex';
Vue.use(Search);
export default {
  name: "search",
  data() {
    return {
      searchValue: "",
      show: false,
      searchShow: false,
      find: [
        "全部商品",
        "红米",
        "空调",
        "小米手机",
        "电视",
        "洗衣机",
        "净水器",
        "耳机",
      ],
      prompt: [
        "小米",
        "小米12",
        "小米12X",
        "小米12 Pro",
        "小米mix fold",
        "小米10S",
        "小米平板5",
        "小米平板5 Pro",
        "小米电视ES65 2022",
        "小米手机",
      ],
      list: [
        {
          cat_id: 0,
          comments_total: "668641",
          is_multi_price: false,
          is_stock: false,
          log_code:
            "bpm=83.250.3881506.10&cdm=0.1.MjAwMS1NaXNob3BSYW5rLXhpYW9taV9jYXRlZ29yeV9wYWdlLWV4cElkXzE2ODA1MS1leHBJZF8xMjIwMTUtZXhwSWRfMTUzNzIwLWV4cElkXzIwODQ0MC1leHBJZF8xODc2MTgtZXhwSWRfMTU0MzIwLWV4cElkXzE2NzkyNy1leHBJZF8xNjc5MTktZXhwSWRfMTg3NjIxLWV4cElkXzE2NjMwNi1leHBJZF8xNjE5ODItZXhwSWRfMTA2MDkxLWV4cElkXzE4MzQ5Mi1leHBJZF8xNjgwMjktZXhwSWRfMTM2NTQ2LWV4cElkXzE4Nzc2OS1leHBJZF8xNjc4MjItZXhwSWRfMTg3NzQ3LWV4cElkXzE4NTIwNy1leHBJZF8yMDYxMDctZXhwSWRfMTAzMTg2LWV4cElkXzE4NTE1MC1leHBJZF8yMDg2MTgtdHJhY2VJZF8zNDlkYzA5ZmEyMjA0OTgzOGVmOGVkM2FkYTRjOTEzNA==.0&uni=8.1599&next=6.64.2.13600",
          market_price: "69",
          name: "小米33W充电器套装",
          price: "69",
          product_desc:
            "智能识别设备 / 智能温控设计 / 高防火等级材料 / AC100—240V宽幅电压",
          product_desc_origin:
            "智能识别设备 / 智能温控设计 / 高防火等级材料 / AC100—240V宽幅电压",
          product_id: 13600,
          puzzle_url:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1d62ef1c575f6f49e873cbd468ab3a52.png?w=800&h=800",
          satisfy_per: "99.9%",
          spm_stat: {
            scm: "server.0.0.0.product.1599.0.0",
            spm_code: "category_stmt.product_list_1599.1",
          },
        },
        {
          cat_id: 0,
          comments_total: "263211",
          is_multi_price: false,
          is_stock: false,
          log_code:
            "bpm=83.250.3881506.11&cdm=0.1.MjAwMS1NaXNob3BSYW5rLXhpYW9taV9jYXRlZ29yeV9wYWdlLWV4cElkXzE2ODA1MS1leHBJZF8xMjIwMTUtZXhwSWRfMTUzNzIwLWV4cElkXzIwODQ0MC1leHBJZF8xODc2MTgtZXhwSWRfMTU0MzIwLWV4cElkXzE2NzkyNy1leHBJZF8xNjc5MTktZXhwSWRfMTg3NjIxLWV4cElkXzE2NjMwNi1leHBJZF8xNjE5ODItZXhwSWRfMTA2MDkxLWV4cElkXzE4MzQ5Mi1leHBJZF8xNjgwMjktZXhwSWRfMTM2NTQ2LWV4cElkXzE4Nzc2OS1leHBJZF8xNjc4MjItZXhwSWRfMTg3NzQ3LWV4cElkXzE4NTIwNy1leHBJZF8yMDYxMDctZXhwSWRfMTAzMTg2LWV4cElkXzE4NTE1MC1leHBJZF8yMDg2MTgtdHJhY2VJZF8zNDlkYzA5ZmEyMjA0OTgzOGVmOGVkM2FkYTRjOTEzNA==.0&uni=8.1599&next=6.64.2.13797",
          market_price: "129",
          name: "小米67W充电器套装",
          price: "129",
          product_desc:
            "36分钟极速回血/ 多重安全保护，全方位保障用电安全/ 耐高温材质，加倍安全",
          product_desc_origin:
            "36分钟极速回血/ 多重安全保护，全方位保障用电安全/ 耐高温材质，加倍安全",
          product_id: 13797,
          puzzle_url:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/80c2c52ec7dcc8cba5d34de3de81f788.png?w=800&h=800",
          satisfy_per: "99.8%",
          spm_stat: {
            scm: "server.0.0.0.product.1599.0.0",
            spm_code: "category_stmt.product_list_1599.2",
          },
        },
        {
          cat_id: 0,
          comments_total: "570730",
          is_multi_price: false,
          is_stock: false,
          log_code:
            "bpm=83.250.3881506.8&cdm=0.1.MjAwMS1NaXNob3BSYW5rLXhpYW9taV9jYXRlZ29yeV9wYWdlLWV4cElkXzE2ODA1MS1leHBJZF8xMjIwMTUtZXhwSWRfMTUzNzIwLWV4cElkXzIwODQ0MC1leHBJZF8xODc2MTgtZXhwSWRfMTU0MzIwLWV4cElkXzE2NzkyNy1leHBJZF8xNjc5MTktZXhwSWRfMTg3NjIxLWV4cElkXzE2NjMwNi1leHBJZF8xNjE5ODItZXhwSWRfMTA2MDkxLWV4cElkXzE4MzQ5Mi1leHBJZF8xNjgwMjktZXhwSWRfMTM2NTQ2LWV4cElkXzE4Nzc2OS1leHBJZF8xNjc4MjItZXhwSWRfMTg3NzQ3LWV4cElkXzE4NTIwNy1leHBJZF8yMDYxMDctZXhwSWRfMTAzMTg2LWV4cElkXzE4NTE1MC1leHBJZF8yMDg2MTgtdHJhY2VJZF8zNDlkYzA5ZmEyMjA0OTgzOGVmOGVkM2FkYTRjOTEzNA==.0&uni=8.1599&next=6.64.2.13347",
          market_price: "99",
          name: "小米氮化镓充电器 Type-C 55W",
          price: "99",
          product_desc: "精致小巧，快速回血所有常用设备",
          product_desc_origin: "精致小巧，快速回血所有常用设备",
          product_id: 13347,
          puzzle_url:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/41b69e20362e079f2e365b1c23464700.png?w=800&h=800",
          satisfy_per: "99.8%",
          spm_stat: {
            scm: "server.0.0.0.product.1599.0.0",
            spm_code: "category_stmt.product_list_1599.3",
          },
        },
        {
          cat_id: 0,
          comments_total: "764243",
          is_multi_price: false,
          is_stock: false,
          log_code:
            "bpm=83.250.3881506.7&cdm=0.1.MjAwMS1NaXNob3BSYW5rLXhpYW9taV9jYXRlZ29yeV9wYWdlLWV4cElkXzE2ODA1MS1leHBJZF8xMjIwMTUtZXhwSWRfMTUzNzIwLWV4cElkXzIwODQ0MC1leHBJZF8xODc2MTgtZXhwSWRfMTU0MzIwLWV4cElkXzE2NzkyNy1leHBJZF8xNjc5MTktZXhwSWRfMTg3NjIxLWV4cElkXzE2NjMwNi1leHBJZF8xNjE5ODItZXhwSWRfMTA2MDkxLWV4cElkXzE4MzQ5Mi1leHBJZF8xNjgwMjktZXhwSWRfMTM2NTQ2LWV4cElkXzE4Nzc2OS1leHBJZF8xNjc4MjItZXhwSWRfMTg3NzQ3LWV4cElkXzE4NTIwNy1leHBJZF8yMDYxMDctZXhwSWRfMTAzMTg2LWV4cElkXzE4NTE1MC1leHBJZF8yMDg2MTgtdHJhY2VJZF8zNDlkYzA5ZmEyMjA0OTgzOGVmOGVkM2FkYTRjOTEzNA==.0&uni=8.1599&next=6.64.2.7092",
          market_price: "29.9",
          name: "18W USB充电器快充版",
          price: "29.9",
          product_desc: "支持QC3.0设备充电 / 支持iOS设备充电/ 美观耐用",
          product_desc_origin: "支持QC3.0设备充电 / 支持iOS设备充电/ 美观耐用",
          product_id: 7092,
          puzzle_url:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d088e414fe640d63939de7e0944027f6.png?w=800&h=800",
          satisfy_per: "99.8%",
          spm_stat: {
            scm: "server.0.0.0.product.1599.0.0",
            spm_code: "category_stmt.product_list_1599.4",
          },
        },
        {
          cat_id: 0,
          comments_total: "57979",
          is_multi_price: false,
          is_stock: false,
          log_code:
            "bpm=83.250.3881506.1&cdm=0.1.MjAwMS1NaXNob3BSYW5rLXhpYW9taV9jYXRlZ29yeV9wYWdlLWV4cElkXzE2ODA1MS1leHBJZF8xMjIwMTUtZXhwSWRfMTUzNzIwLWV4cElkXzIwODQ0MC1leHBJZF8xODc2MTgtZXhwSWRfMTU0MzIwLWV4cElkXzE2NzkyNy1leHBJZF8xNjc5MTktZXhwSWRfMTg3NjIxLWV4cElkXzE2NjMwNi1leHBJZF8xNjE5ODItZXhwSWRfMTA2MDkxLWV4cElkXzE4MzQ5Mi1leHBJZF8xNjgwMjktZXhwSWRfMTM2NTQ2LWV4cElkXzE4Nzc2OS1leHBJZF8xNjc4MjItZXhwSWRfMTg3NzQ3LWV4cElkXzE4NTIwNy1leHBJZF8yMDYxMDctZXhwSWRfMTAzMTg2LWV4cElkXzE4NTE1MC1leHBJZF8yMDg2MTgtdHJhY2VJZF8zNDlkYzA5ZmEyMjA0OTgzOGVmOGVkM2FkYTRjOTEzNA==.0&uni=8.1599&next=6.64.2.13566",
          market_price: "79",
          name: "小米GaN充电器 33W",
          price: "79",
          product_desc: "33W MAX充电功率 | 超小体积  | 氮化镓黑科技",
          product_desc_origin: "33W MAX充电功率 | 超小体积  | 氮化镓黑科技",
          product_id: 13566,
          puzzle_url:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/529467d9aaba7ff385193af03b0cc8ba.png?w=800&h=800",
          satisfy_per: "99.8%",
          spm_stat: {
            scm: "server.0.0.0.product.1599.0.0",
            spm_code: "category_stmt.product_list_1599.5",
          },
        },
        {
          cat_id: 0,
          comments_total: "90455",
          is_multi_price: false,
          is_stock: false,
          log_code:
            "bpm=83.250.3881506.5&cdm=0.1.MjAwMS1NaXNob3BSYW5rLXhpYW9taV9jYXRlZ29yeV9wYWdlLWV4cElkXzE2ODA1MS1leHBJZF8xMjIwMTUtZXhwSWRfMTUzNzIwLWV4cElkXzIwODQ0MC1leHBJZF8xODc2MTgtZXhwSWRfMTU0MzIwLWV4cElkXzE2NzkyNy1leHBJZF8xNjc5MTktZXhwSWRfMTg3NjIxLWV4cElkXzE2NjMwNi1leHBJZF8xNjE5ODItZXhwSWRfMTA2MDkxLWV4cElkXzE4MzQ5Mi1leHBJZF8xNjgwMjktZXhwSWRfMTM2NTQ2LWV4cElkXzE4Nzc2OS1leHBJZF8xNjc4MjItZXhwSWRfMTg3NzQ3LWV4cElkXzE4NTIwNy1leHBJZF8yMDYxMDctZXhwSWRfMTAzMTg2LWV4cElkXzE4NTE1MC1leHBJZF8yMDg2MTgtdHJhY2VJZF8zNDlkYzA5ZmEyMjA0OTgzOGVmOGVkM2FkYTRjOTEzNA==.0&uni=8.1599&next=6.64.2.12896",
          market_price: "39",
          name: "小米Type-C充电器快充版 20W 白色",
          price: "39",
          product_desc:
            "20W大功率 |兼容多种快充协议 | 100-240V宽电压 | 多重安全保护 | 支持苹果12",
          product_desc_origin:
            "20W大功率 |兼容多种快充协议 | 100-240V宽电压 | 多重安全保护 | 支持苹果12",
          product_id: 12896,
          puzzle_url:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f794e6cf74dc9e3c929f49133ad8a0ee.png?w=800&h=800",
          satisfy_per: "99.8%",
          spm_stat: {
            scm: "server.0.0.0.product.1599.0.0",
            spm_code: "category_stmt.product_list_1599.6",
          },
        },
        {
          cat_id: 0,
          comments_total: "32215",
          is_multi_price: false,
          is_stock: false,
          log_code:
            "bpm=83.250.3881506.6&cdm=0.1.MjAwMS1NaXNob3BSYW5rLXhpYW9taV9jYXRlZ29yeV9wYWdlLWV4cElkXzE2ODA1MS1leHBJZF8xMjIwMTUtZXhwSWRfMTUzNzIwLWV4cElkXzIwODQ0MC1leHBJZF8xODc2MTgtZXhwSWRfMTU0MzIwLWV4cElkXzE2NzkyNy1leHBJZF8xNjc5MTktZXhwSWRfMTg3NjIxLWV4cElkXzE2NjMwNi1leHBJZF8xNjE5ODItZXhwSWRfMTA2MDkxLWV4cElkXzE4MzQ5Mi1leHBJZF8xNjgwMjktZXhwSWRfMTM2NTQ2LWV4cElkXzE4Nzc2OS1leHBJZF8xNjc4MjItZXhwSWRfMTg3NzQ3LWV4cElkXzE4NTIwNy1leHBJZF8yMDYxMDctZXhwSWRfMTAzMTg2LWV4cElkXzE4NTE1MC1leHBJZF8yMDg2MTgtdHJhY2VJZF8zNDlkYzA5ZmEyMjA0OTgzOGVmOGVkM2FkYTRjOTEzNA==.0&uni=8.1599&next=6.64.2.14237",
          market_price: "89",
          name: "小米 Lightning 充电套装20W白色",
          price: "89",
          product_desc: "20W快充 | 官方 Mfi认证| 小巧便捷",
          product_desc_origin: "20W快充 | 官方 Mfi认证| 小巧便捷",
          product_id: 14237,
          puzzle_url:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3549d8266934eb129b283f57becf8090.png?w=800&h=800",
          satisfy_per: "99.8%",
          spm_stat: {
            scm: "server.0.0.0.product.1599.0.0",
            spm_code: "category_stmt.product_list_1599.7",
          },
        },
        {
          cat_id: 0,
          comments_total: "52262",
          is_multi_price: false,
          is_stock: false,
          log_code:
            "bpm=83.250.3881506.4&cdm=0.1.MjAwMS1NaXNob3BSYW5rLXhpYW9taV9jYXRlZ29yeV9wYWdlLWV4cElkXzE2ODA1MS1leHBJZF8xMjIwMTUtZXhwSWRfMTUzNzIwLWV4cElkXzIwODQ0MC1leHBJZF8xODc2MTgtZXhwSWRfMTU0MzIwLWV4cElkXzE2NzkyNy1leHBJZF8xNjc5MTktZXhwSWRfMTg3NjIxLWV4cElkXzE2NjMwNi1leHBJZF8xNjE5ODItZXhwSWRfMTA2MDkxLWV4cElkXzE4MzQ5Mi1leHBJZF8xNjgwMjktZXhwSWRfMTM2NTQ2LWV4cElkXzE4Nzc2OS1leHBJZF8xNjc4MjItZXhwSWRfMTg3NzQ3LWV4cElkXzE4NTIwNy1leHBJZF8yMDYxMDctZXhwSWRfMTAzMTg2LWV4cElkXzE4NTE1MC1leHBJZF8yMDg2MTgtdHJhY2VJZF8zNDlkYzA5ZmEyMjA0OTgzOGVmOGVkM2FkYTRjOTEzNA==.0&uni=8.1599&next=6.64.2.11631",
          market_price: "99",
          name: "小米充电器 65W 疾速闪充版",
          price: "99",
          product_desc:
            "可为小米10 Pro提供50W MAX的充电功率 / 兼容充电协议PD2.0,PD3.0,PPS/QC 4+ / 支持AC100-240V宽幅电压输入 / 智能识别充电器与连接设备 / 外壳采用高防火等级 UL94 V-0材料",
          product_desc_origin:
            "可为小米10 Pro提供50W MAX的充电功率 / 兼容充电协议PD2.0,PD3.0,PPS/QC 4+ / 支持AC100-240V宽幅电压输入 / 智能识别充电器与连接设备 / 外壳采用高防火等级 UL94 V-0材料",
          product_id: 11631,
          puzzle_url:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/60608de06dc67f1f8f59cfae6f1f3f1e.png?w=800&h=800",
          satisfy_per: "99.8%",
          spm_stat: {
            scm: "server.0.0.0.product.1599.0.0",
            spm_code: "category_stmt.product_list_1599.8",
          },
        },
        {
          cat_id: 0,
          comments_total: "41386",
          is_multi_price: false,
          is_stock: false,
          log_code:
            "bpm=83.250.3881506.2&cdm=0.1.MjAwMS1NaXNob3BSYW5rLXhpYW9taV9jYXRlZ29yeV9wYWdlLWV4cElkXzE2ODA1MS1leHBJZF8xMjIwMTUtZXhwSWRfMTUzNzIwLWV4cElkXzIwODQ0MC1leHBJZF8xODc2MTgtZXhwSWRfMTU0MzIwLWV4cElkXzE2NzkyNy1leHBJZF8xNjc5MTktZXhwSWRfMTg3NjIxLWV4cElkXzE2NjMwNi1leHBJZF8xNjE5ODItZXhwSWRfMTA2MDkxLWV4cElkXzE4MzQ5Mi1leHBJZF8xNjgwMjktZXhwSWRfMTM2NTQ2LWV4cElkXzE4Nzc2OS1leHBJZF8xNjc4MjItZXhwSWRfMTg3NzQ3LWV4cElkXzE4NTIwNy1leHBJZF8yMDYxMDctZXhwSWRfMTAzMTg2LWV4cElkXzE4NTE1MC1leHBJZF8yMDg2MTgtdHJhY2VJZF8zNDlkYzA5ZmEyMjA0OTgzOGVmOGVkM2FkYTRjOTEzNA==.0&uni=8.1599&next=6.64.2.12456",
          market_price: "39",
          name: "小米充电器22.5W",
          price: "39",
          product_desc:
            "可为小米10青春版手机提供22.5W（MAX）的充电功率 / 支持QC3+协议 / 定制安全芯片 / 高防火等级材料 / 出国旅行也能用",
          product_desc_origin:
            "可为小米10青春版手机提供22.5W（MAX）的充电功率 / 支持QC3+协议 / 定制安全芯片 / 高防火等级材料 / 出国旅行也能用",
          product_id: 12456,
          puzzle_url:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8329878b3b34d9ead6c9fdf9f7667080.png?w=800&h=800",
          satisfy_per: "99.9%",
          spm_stat: {
            scm: "server.0.0.0.product.1599.0.0",
            spm_code: "category_stmt.product_list_1599.9",
          },
        },
        {
          cat_id: 0,
          comments_total: "30444",
          is_multi_price: false,
          is_stock: false,
          log_code:
            "bpm=83.250.3881506.12&cdm=0.1.MjAwMS1NaXNob3BSYW5rLXhpYW9taV9jYXRlZ29yeV9wYWdlLWV4cElkXzE2ODA1MS1leHBJZF8xMjIwMTUtZXhwSWRfMTUzNzIwLWV4cElkXzIwODQ0MC1leHBJZF8xODc2MTgtZXhwSWRfMTU0MzIwLWV4cElkXzE2NzkyNy1leHBJZF8xNjc5MTktZXhwSWRfMTg3NjIxLWV4cElkXzE2NjMwNi1leHBJZF8xNjE5ODItZXhwSWRfMTA2MDkxLWV4cElkXzE4MzQ5Mi1leHBJZF8xNjgwMjktZXhwSWRfMTM2NTQ2LWV4cElkXzE4Nzc2OS1leHBJZF8xNjc4MjItZXhwSWRfMTg3NzQ3LWV4cElkXzE4NTIwNy1leHBJZF8yMDYxMDctZXhwSWRfMTAzMTg2LWV4cElkXzE4NTE1MC1leHBJZF8yMDg2MTgtdHJhY2VJZF8zNDlkYzA5ZmEyMjA0OTgzOGVmOGVkM2FkYTRjOTEzNA==.0&uni=8.1599&next=6.64.2.14261",
          market_price: "149",
          name: "小米GaN充电器 65W ",
          price: "149",
          product_desc: "小米GaN充电器 65W",
          product_desc_origin: "小米GaN充电器 65W",
          product_id: 14261,
          puzzle_url:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3f04c9f0b8c19dc52e620af67362c633.png?w=800&h=800",
          satisfy_per: "99.9%",
          spm_stat: {
            scm: "server.0.0.0.product.1599.0.0",
            spm_code: "category_stmt.product_list_1599.10",
          },
        },
        {
          cat_id: 0,
          comments_total: "2130",
          is_multi_price: false,
          is_stock: false,
          log_code:
            "bpm=83.250.3881506.13&cdm=0.1.MjAwMS1NaXNob3BSYW5rLXhpYW9taV9jYXRlZ29yeV9wYWdlLWV4cElkXzE2ODA1MS1leHBJZF8xMjIwMTUtZXhwSWRfMTUzNzIwLWV4cElkXzIwODQ0MC1leHBJZF8xODc2MTgtZXhwSWRfMTU0MzIwLWV4cElkXzE2NzkyNy1leHBJZF8xNjc5MTktZXhwSWRfMTg3NjIxLWV4cElkXzE2NjMwNi1leHBJZF8xNjE5ODItZXhwSWRfMTA2MDkxLWV4cElkXzE4MzQ5Mi1leHBJZF8xNjgwMjktZXhwSWRfMTM2NTQ2LWV4cElkXzE4Nzc2OS1leHBJZF8xNjc4MjItZXhwSWRfMTg3NzQ3LWV4cElkXzE4NTIwNy1leHBJZF8yMDYxMDctZXhwSWRfMTAzMTg2LWV4cElkXzE4NTE1MC1leHBJZF8yMDg2MTgtdHJhY2VJZF8zNDlkYzA5ZmEyMjA0OTgzOGVmOGVkM2FkYTRjOTEzNA==.0&uni=8.1599&next=6.64.2.15221",
          market_price: "299",
          name: "小米120W充电器套装",
          price: "299",
          product_desc:
            "采用GaN功率管，电源转换效率更高 / 高频+平面变压器模组设计，灌胶均热可靠性好 / 多重安全的快速充电器 / 外壳采用UL94-V0级防火耐高温材料打造 / 内置智能识别芯片 / 采用Type-C接口，数据线兼容性更强 / 整体设计风格简洁 / 可满足5000米的高海拔场合使用",
          product_desc_origin:
            "采用GaN功率管，电源转换效率更高 / 高频+平面变压器模组设计，灌胶均热可靠性好 / 多重安全的快速充电器 / 外壳采用UL94-V0级防火耐高温材料打造 / 内置智能识别芯片 / 采用Type-C接口，数据线兼容性更强 / 整体设计风格简洁 / 可满足5000米的高海拔场合使用",
          product_id: 15221,
          puzzle_url:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/447cd7e926bdef838115d9030ecdd9db.png?w=800&h=800",
          satisfy_per: "99.8%",
          spm_stat: {
            scm: "server.0.0.0.product.1599.0.0",
            spm_code: "category_stmt.product_list_1599.11",
          },
        },
        {
          cat_id: 0,
          comments_total: "34",
          is_multi_price: false,
          is_stock: false,
          log_code:
            "bpm=83.250.3881506.14&cdm=0.1.MjAwMS1NaXNob3BSYW5rLXhpYW9taV9jYXRlZ29yeV9wYWdlLWV4cElkXzE2ODA1MS1leHBJZF8xMjIwMTUtZXhwSWRfMTUzNzIwLWV4cElkXzIwODQ0MC1leHBJZF8xODc2MTgtZXhwSWRfMTU0MzIwLWV4cElkXzE2NzkyNy1leHBJZF8xNjc5MTktZXhwSWRfMTg3NjIxLWV4cElkXzE2NjMwNi1leHBJZF8xNjE5ODItZXhwSWRfMTA2MDkxLWV4cElkXzE4MzQ5Mi1leHBJZF8xNjgwMjktZXhwSWRfMTM2NTQ2LWV4cElkXzE4Nzc2OS1leHBJZF8xNjc4MjItZXhwSWRfMTg3NzQ3LWV4cElkXzE4NTIwNy1leHBJZF8yMDYxMDctZXhwSWRfMTAzMTg2LWV4cElkXzE4NTE1MC1leHBJZF8yMDg2MTgtdHJhY2VJZF8zNDlkYzA5ZmEyMjA0OTgzOGVmOGVkM2FkYTRjOTEzNA==.0&uni=8.1599&next=6.64.2.15543",
          market_price: "149",
          name: "小米67W GaN 小布丁充电器套装",
          price: "149",
          product_desc: "67W大功率快充，潮流高颜值，多重充电保护",
          product_desc_origin: "67W大功率快充，潮流高颜值，多重充电保护",
          product_id: 15543,
          puzzle_url:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/bc183494ab5c63ab0b3d36508a35b607.png?w=800&h=800",
          satisfy_per: "100.0%",
          spm_stat: {
            scm: "server.0.0.0.product.1599.0.0",
            spm_code: "category_stmt.product_list_1599.12",
          },
        },
        {
          cat_id: 0,
          comments_total: "9519",
          is_multi_price: false,
          is_stock: false,
          log_code:
            "bpm=83.250.3881506.9&cdm=0.1.MjAwMS1NaXNob3BSYW5rLXhpYW9taV9jYXRlZ29yeV9wYWdlLWV4cElkXzE2ODA1MS1leHBJZF8xMjIwMTUtZXhwSWRfMTUzNzIwLWV4cElkXzIwODQ0MC1leHBJZF8xODc2MTgtZXhwSWRfMTU0MzIwLWV4cElkXzE2NzkyNy1leHBJZF8xNjc5MTktZXhwSWRfMTg3NjIxLWV4cElkXzE2NjMwNi1leHBJZF8xNjE5ODItZXhwSWRfMTA2MDkxLWV4cElkXzE4MzQ5Mi1leHBJZF8xNjgwMjktZXhwSWRfMTM2NTQ2LWV4cElkXzE4Nzc2OS1leHBJZF8xNjc4MjItZXhwSWRfMTg3NzQ3LWV4cElkXzE4NTIwNy1leHBJZF8yMDYxMDctZXhwSWRfMTAzMTg2LWV4cElkXzE4NTE1MC1leHBJZF8yMDg2MTgtdHJhY2VJZF8zNDlkYzA5ZmEyMjA0OTgzOGVmOGVkM2FkYTRjOTEzNA==.0&uni=8.1599&next=6.64.2.13473",
          market_price: "249",
          name: "小米充电器120W",
          price: "249",
          product_desc:
            "120W 超大功率 | 智能防护 | 更多兼容 | 安全可靠 | 风格简洁",
          product_desc_origin:
            "120W 超大功率 | 智能防护 | 更多兼容 | 安全可靠 | 风格简洁",
          product_id: 13473,
          puzzle_url:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2099b9bcc0a9721d03f06793ee513ac7.png?w=800&h=800",
          satisfy_per: "99.7%",
          spm_stat: {
            scm: "server.0.0.0.product.1599.0.0",
            spm_code: "category_stmt.product_list_1599.13",
          },
        },
        {
          cat_id: 0,
          comments_total: "65648",
          is_multi_price: false,
          is_stock: false,
          log_code:
            "bpm=83.250.3881506.3&cdm=0.1.MjAwMS1NaXNob3BSYW5rLXhpYW9taV9jYXRlZ29yeV9wYWdlLWV4cElkXzE2ODA1MS1leHBJZF8xMjIwMTUtZXhwSWRfMTUzNzIwLWV4cElkXzIwODQ0MC1leHBJZF8xODc2MTgtZXhwSWRfMTU0MzIwLWV4cElkXzE2NzkyNy1leHBJZF8xNjc5MTktZXhwSWRfMTg3NjIxLWV4cElkXzE2NjMwNi1leHBJZF8xNjE5ODItZXhwSWRfMTA2MDkxLWV4cElkXzE4MzQ5Mi1leHBJZF8xNjgwMjktZXhwSWRfMTM2NTQ2LWV4cElkXzE4Nzc2OS1leHBJZF8xNjc4MjItZXhwSWRfMTg3NzQ3LWV4cElkXzE4NTIwNy1leHBJZF8yMDYxMDctZXhwSWRfMTAzMTg2LWV4cElkXzE4NTE1MC1leHBJZF8yMDg2MTgtdHJhY2VJZF8zNDlkYzA5ZmEyMjA0OTgzOGVmOGVkM2FkYTRjOTEzNA==.0&uni=8.1599&next=6.64.2.12457",
          market_price: "69",
          name: "小米充电器33W",
          price: "59",
          product_desc:
            "可为Redmi K30 Pro、Redmi 10X Pro等手机提供33W（MAX）的充电功率 / 智能识别设备 / 智能温控设计 / 高防火材料，安全有保障 / 出国旅行可用",
          product_desc_origin:
            "可为Redmi K30 Pro、Redmi 10X Pro等手机提供33W（MAX）的充电功率 / 智能识别设备 / 智能温控设计 / 高防火材料，安全有保障 / 出国旅行可用",
          product_id: 12457,
          puzzle_url:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1d62ef1c575f6f49e873cbd468ab3a52.png?w=800&h=800",
          satisfy_per: "99.8%",
          spm_stat: {
            scm: "server.0.0.0.product.1599.0.0",
            spm_code: "category_stmt.product_list_1599.14",
          },
        },
      ],
      recommend: null,
    };
  },
  methods: {
    ...mapMutations({addHistory:'addHistory',delHistory:'delHistory'}),
    onInput() {
      if (this.searchValue !== "") {
        this.show = true;
      } else {
        this.show = false;
        this.searchShow = false;
      }
    },
    onSearch() {
      this.show = false;
      if (this.searchValue !== "") {
        this.searchShow = true;
        this.addHistory(this.searchValue)
      } else {
        this.searchShow = false;
      }
    },
  },
  created() {
    this.recommend = recommend;
  },
  computed:{
    ...mapState({history:"history"})
  }
};
</script>

<style lang="less">
.search {
  .home_search {
    display: flex;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 99;
    .home_leimu {
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: #f2f2f2;
      padding-left: 13px;
      .icon-xiangzuo1 {
        font-size: 0.4rem;
        color: #8a8a8a;
      }
    }
    .van-search {
      background: #f2f2f2;
      flex: 1;
      .van-search__content {
        background-color: #fff;
        border-radius: 4px;
        .my-swipe .van-swipe-item {
          color: #fff;
          font-size: 20px;
          line-height: 150px;
          text-align: center;
          background-color: #39a9ed;
        }
      }
      .icon-yonghu {
        font-size: 22px;
      }
      .van-search__action {
        flex: 0 0 32px;
      }
      .search_user {
        display: flex;
        justify-content: center;
      }
    }
  }
  .content {
    padding: 0.4rem 0.32rem;
    text-align: left;
    .history {
      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.35rem;
        font-weight: 700;
      }
      .buttons_out {
        max-height: 1.8rem;
        margin-top: 0.08rem;
        margin-right: -0.24rem;
        overflow: hidden;
        .buttons_in {
          span {
            vertical-align: bottom;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 5.02rem;
            margin-top: 0.24rem;
            margin-right: 0.24rem;
            display: inline-block;
            padding: 0.15rem 0.24rem;
            background: rgba(0, 0, 0, 0.04);
            font-size: 0.24rem;
            border-radius: 0.54rem;
          }
        }
      }
    }
  }
  .prompt {
    text-align: left;
    position: fixed;
    top: 54px;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    & > div {
      background: #fff;
      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
      padding: 0 0.32rem;
      display: flex;
      height: 0.95rem;
      span {
        display: inline-block;
        width: 100%;
        overflow: hidden;
        height: 0.95rem;
        font-size: 0.35rem;
        line-height: 0.95rem;
        white-space: nowrap;
        color: #333;
      }
    }
  }
  .page_wrap {
    text-align: left;
    position: fixed;
    top: 54px;
    z-index: 10;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    background: #fff;
    .item {
      padding: 0.2rem 0.2rem;
      position: relative;
      border-bottom: 1px solid #e4e4e4;
      display: flex;
      .item_img {
        position: relative;
        width: 2.4rem;
        height: 2.4rem;
        text-align: center;
        display: block;
        border-radius: 0.1rem;
        overflow: hidden;
        background: #f4f4f4;
        img {
          width: auto;
          height: 100%;
        }
      }
      .item_intro {
        display: block;
        padding: 0 0.32rem 0.08rem;
        width: 4.2rem;
        box-sizing: border-box;
        text-align: left;
        flex: 1 1 auto;
        .item_name {
          font-size: 0.32rem;
          color: #333;
          margin-bottom: 0.16rem;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .item_brief {
        font-size: 0.23rem;
        color: rgba(0, 0, 0, 0.54);
        margin-bottom: 0.16rem;
        line-height: 0.3rem;
        height: 0.9rem;
        overflow: hidden;
        font-weight: 400;
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          color: #888;
        }
      }
      .item_price {
        font-size: 0.32rem;
        position: relative;
        align-content: center;
        display: flex;
        .price {
          position: relative;
          line-height: 1em;
          color: #ff6000;
        }
      }
      .item_comment {
        margin-top: 0.1rem;
        span {
          font-size: 0.22rem;
          color: #888;
          margin-right: 0.2rem;
        }
      }
    }
    .recommend_lists {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .recommend_list {
        flex: 0 0 49.5%;
        width: 49.5%;
        .list_img {
          width: 100%;
          img {
            width: 100%;
          }
        }
        .list_info {
          padding: 0.18rem 0.26rem 0.22rem;
          .list_name {
            font-size: 0.28rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .list_price {
            font-size: 0.32rem;
            color: #ff6700;
            margin-top: 0.1rem;
            del {
              font-size: 0.22rem;
              margin-left: 0.1rem;
              color: rgba(0, 0, 0, 0.54);
              text-decoration: line-through;
            }
          }
          .price {
            position: relative;
            padding-left: 0.5em;
            line-height: 1em;
          }
        }
      }
    }
    .head_mark {
      width: 100%;
      img {
        width: 100%;
      }
    }
  }
}
</style>